<template>
	<view>
		<view class="login">
			<view class="header">
				<view class="image">
					<image mode="aspectFit" src="../../static/avatar_default.png"></image>
				</view>
				<view class="title">uni-shop</view>
			</view>
			<view class="all">
				<view class="middle">
					<view class="username">
						<uni-section title='用户名' label="姓名" type="line">
							<uni-easyinput class="uni-mt-5" prefixIcon="person-filled" suffixIcon='' :styles="styles" trim="all" focus
								v-model="user" @input="input" placeholder="请输入用户名"></uni-easyinput>
						</uni-section>
					</view>
					<view class="password">
						<uni-section title='密码' type="line">
							<uni-easyinput type="password" prefixIcon="eye-filled" :styles="styles" v-model="pwd"
								placeholder="请输入密码"></uni-easyinput>
						</uni-section>
					</view>
				</view>
				<view class="footder">
					<view class="footder-rego" @click="goto('/subCustomer/register/register')">
						<image mode="aspectFit" src="../../static/注册.png"></image>
						<text>免费注册</text>
					</view>
					<view class="footder-rego" @click="goto('/subCustomer/ForgotPassword/ForgotPassword')">
						<image mode="aspectFit" src="../../static/忘记密码.png"></image>
						<text>忘记密码</text>
					</view>
				</view>
				<u-button type="error" class="button" @click="login" text="登录" shape="circle"></u-button>
				<view class="afterLog">登录后尽享更多权益</view>
			</view>


		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				user: 'admin',
				pwd: '123456',
				styles: {
					borderColor: '#000'
				}
			};
		},
		onLoad(){
			uni.$setNavigationBarColor()
		},
		computed: {
			...mapState('login', ['accountNumber'])
		},
		methods: {
			...mapMutations("login", ["updateToken", "updateUserInfo"]),
			//跳转
			goto(url) {
				uni.navigateTo({
					url: url
				})
			},
			input(e) {

			},
			//登录
			login() {
				let exactnessPwd = void 0
				let exactnessUser = void 0
				if (this.accountNumber.length > 0) {
					exactnessUser = this.accountNumber.some(item => item.username == this.user)
					exactnessPwd = this.accountNumber.filter(item => item.username == this.user).some(item => item.password ==
						this.pwd)
				}

				if (this.user.length == 0) {
					return uni.$showToast("请输入用户名", "error")
				} else if (this.pwd == '') {
					return uni.$showToast("请输入密码！", "error")
				} else if (!exactnessUser) {
					return uni.$showToast("用户名错误！", "error")
				} else if (this.pwd.length < 6) {
					return uni.$showToast("密码至少6位数", "error")
				} else if (!exactnessPwd) {
					return uni.$showToast("密码错误", "error")
				} else {
					
					const token =
						"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo"
					this.updateToken(token)
					let userinfo = {}
					if (this.user == 'admin') {
						// userinfo.nickName = "小懒🐏"
						userinfo.nickName = "小懒"
						userinfo.avatarUrl = "../../static/login.jpg"
						userinfo.phone = "15678831312"
					} else {
						userinfo.nickName = this.user
						userinfo.avatarUrl = "../../static/login.jpg"
						this.accountNumber.filter(item => item.username == this.user).forEach(itemuse => userinfo.phone = itemuse
							.phone)
					}

					let data = new Date()
					let year = data.getFullYear()
					let Month = data.getMonth()
					let Day = data.getDay()
					let Hours = data.getHours()
					let Minutes = data.getMinutes()
					userinfo.time = year + '-' + Month + '-' + Day + ':' + Hours + '-' + Minutes

					this.updateUserInfo(userinfo)
					uni.$showToast("登录成功")
					uni.switchTab({
						url: "/pages/my/my"
					})
					
				}
			}
		}
	}
</script>

<style lang="scss">
	.all {
		width: 80%;
		margin: 0 auto;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 400rpx;

		.image {
			image {
				width: 170rpx;
				height: 170rpx;
				border-radius: 100%;
			}

		}
	}

	.footder {
		display: flex;
		justify-content: space-between;
		margin: 0 20rpx;
		margin-bottom: 20px;
		margin-top: 20rpx;
		font-size: 30rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin: 0 5rpx;
		}

		.footder-rego {
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-size: 26rpx;
			}
		}
	}

	.button {
		color: #fff;
		background-color: #db3d3c;
	}

	.afterLog {
		display: flex;
		justify-content: center;
		color: #808080;
		font-size: 24rpx;
		margin-top: 15rpx;
	}
</style>